import * as React from 'react';
import classNames from 'classnames';
import { ComponentType } from '../types';

export type CardType = ComponentType;

import './index.scss';

export class CardTitle extends React.Component {
  render() {
    return <h2 className="x-card-item x-card-title">{this.props.children}</h2>;
  }
}

export class CardBody extends React.Component {
  render() {
    return <div className="x-card-item x-card-body">{this.props.children}</div>;
  }
}

type CardProps = {
  style?: React.CSSProperties | undefined;
  type?: CardType;
};

export class Card extends React.Component<CardProps> {
  render() {
    const { style, type } = this.props;
    return (
      <div style={style} className={classNames('x-card', `x-card-${type || 'default'}`)}>
        {this.props.children}
      </div>
    );
  }
}
